<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #canvas {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <canvas id="canvas" width="500" height="500"></canvas>



  <script>
    const context = document.querySelector('#canvas').getContext('2d')
    context.strokeStyle = '#e67e22'
    context.lineWidth = '20'
    context.translate(250, 250)
    context.rotate(270 * Math.PI / 180);

    let angle = 360

    function animate() {
      context.clearRect(-250,-250, 1000, 1000)

      context.arc(0, 0, 190, Math.PI / 180 * 0, Math.PI / 180 * angle)
      // setTimeout(() => {
      //   angle - 20
      // }, 1000);
      angle--
      context.stroke();
      requestAnimationFrame(animate)

    }
    animate()
  </script>
</body>

</html>